Corporations and other types of organizations utilize adaptable software to document and analyze their internal processes and organizational structure. Products such as the ARIS Connect Web Platform (an HTML/JavaScript based tool) provide a set of Rich Internet Applications (RIAs), which allow users to browse, read, create, and write their business processes using a web browser.
Software developers are able to provide the best user experience by adhering to common rules, principles, and patterns for modern web interfaces. One key principle of such development is the “Feedback Principle” which enables the system, including every UI component, to react in a manner that clearly communicates to the user what is the result of the user's action and what is the current state of the system and/or UI component.
A simple example of the implementation of the Feedback Principle is the use of a control button. For a simple control button, it is necessary to distinguish the following states: (1) Active (the button can be pressed); (2) Disable (the button cannot be pressed); (3) Hovered (the button is the target of the user's pointer); and (4) Pressed (the button has been pressed). Similar to many other components in modern web interfaces, buttons are often integrated seamlessly into the UI and only represented by a small icon/pictogram that illustrates the action related to the button. In such a case, it is important that the icon is an integral part of the component's feedback and clearly reflects the states described above.
Accordingly, many UI controls, elements, and artifacts utilize changes in color to provide clear, essential, and varied feedback to users. For example, the background gradient of a panel can be changed from a gray gradient to a red gradient to indicate an error within the related content. A small balloon beside a label or the user's picture (such as an avatar) can indicate new notifications or the online status of a web community buddy. User defined colored folders within a tree control can allow the users to structure their content in a better, more personalized manner. Colorizing background textures or other elements of a web page in accordance with the current time, weather, or state of process (such as at run time) can facilitate new ways to develop responsive web design.
While changing the color of the icon or graphical element displayed on the UI or web page is a common method for providing system feedback for the different states of UI components, there are many disadvantageous associated with traditional icon colorization approaches, including image sprites, icon fonts, CSS image masks, and browser side rendering with HTML5 Canvas.